import React, { useEffect, useRef } from "react";

pdfjsLib.GlobalWorkerOptions.workerSrc = "/static/js/pdf.worker.mjs";

export default function PdfReader() {
  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument("/static/test.pdf");
    loadingTask.promise.then(function (pdf) {
      console.log("PDF loaded", pdf, pdf.numPages);
      pdf.getPage(1).then((page) => {
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = document.querySelector("#canvas");
        console.log("获取内容", page, canvas);
        const context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // 渲染页面到 Canvas
        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        page.render(renderContext).promise.then(content => {
          console.log("渲染完成", content);
        });
      });
    });
  }, []);
  return (
    <div>
      <h2>哈哈</h2>
      <canvas id="canvas" style={{ width: 1000, height: 1800 }}></canvas>
    </div>
  );
}
